<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      li{
        list-style-type: none;
        margin: 0;
        padding: 0;
      }
      .menu{
        width: 100%;
        display: none;
        /*justify-content:center;*/
        /*justify-content:space-between;*/
        /*justify-content:space-around;*/
      }
      .menu li{
          flex: 1;
      }

      .box{
          width: 100%;
          height: 100px;
          display: flex;
          background-color: white;
          flex:auto;
      }
      .box1{
          flex: 1;
          background-color: #7b4c4c;
      }
      .box2{
          flex: 2;
          background-color: #671414;
      }
      .box3{
          flex: 1;
          background-color: #2a2929;
      }



    </style>
</head>
<body>
<!--<ul class="menu">-->
<!--  <li><div>1</div></li>-->
<!--  <li>2</li>-->
<!--  <li>3</li>-->
<!--  <li>4</li>-->
<!--</ul>-->

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

<!--
1.flex弹性布局
  CSS3 弹性盒( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备，元素拥有恰当的行为的布局方式。
  目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

  常用的属性：
    1)flex-direction:
      指定了弹性子元素在父容器中的位置。此属性作用于父容器语法
      属性：
        row :横向从左到右排列(左对齐)，默认的排列方式。
        row-reverse :反转横向排列(右对齐，从后往前排，最后一项排在最前面。
        column :纵向排列。
        column-reverse :反转纵向排列，从后往前排，最后一项排在最上面
    2)justify-content
      属性应用在弹性容器上，把弹性项沿着弹性容器的x轴线(main axis)对齐。此属性作用于父容器。
      语法:
        flex-start：紧凑方式左对齐
        flex-end：紧凑方式右对齐
        center：紧凑方式居中对齐
        space-between （重要）：除了第一个和最后一个子元素外，其他子元素等分空白区域
        space-around （重要）：所有子元素等分空白区域
    3)align-items:属性应用在弹性容器上，把弹性项沿着弹性容器的y轴线对齐。此属性作用于父容器。
    语法:
      align-items:flex-start | flex-end | center | baseline | stretch
      参数:
        flex-start:沿纵轴顶端对齐
        flex-end:沿纵轴底端对齐
        center:沿纵轴垂直居中对齐
        baseline:沿纵轴基线对齐
        stretch:纵向拉伸对齐

     4)flex-grow: 子元素放大比例，此属性作用于子容器。
        flex-grow: 数字
        当子元素设置了宽度，此属性不生效

     5)flex(应用于子元素)用于指定弹性子元素空间分配。语法:
          flex:auto initial none inherit [flex-grow] [flex-shrink] [ flex-basis ]
          auto :计算值为 1 1 auto。
          initial :计算值为 0 l auto。
          none :计算值为 0 0 auto。
          inherit : 从父元素继承。
        Tips:
            flex可以带1-3个参数。
            1)带1个参数
                a)无单位，这个数值会被当作flex-grow(放大)的值
                b)带单位，这个数值会被当作flex-basis(基本宽度)的值
                c)auto(自动宽度)initial(初始宽度)none(无)
            2)带2个参数
                第1个参数必须是一个无单位的数值，它会被当作flex-grow的值。
                第2个参数:
                    a)无单位，这个数值会被当作flex-shrink(收缩比率)的值
                    b)带单位，这个数值会被当作flex-basis(基本宽度)的值
            3)带3个参数
                第1个参数必须是一个无单位的数值，它会被当作flex-grow的值。
                第2个参数也必须是一个无单位的数值，它会被当作flex-shrink(收缩比率)的值。
                第3个参数必须是一个有效的宽度值(带单位)，它会被当作flex-basis(基本宽度)的值
-->

</body>
</html>